<script setup>

import { onMounted } from 'vue';
import echarts from '@/echarts'
import dateUtil from '@/utils/dateUtil';
import chartsApi from '@/api/chartsApi'


let charts = null;

// 加载完成后再进行
onMounted(()=>{
    // 先初始化
    initEcharts();
    // 获取数据
    getData();
});

function initEcharts(){
    charts = echarts.init(document.getElementById('hotDoctorSchedules'));
    charts.setOption(option);
    getData();
}

function getData(){
    const date = dateUtil.getMonthAgo();

    chartsApi.hotDoctorSchedules(date).then(result => {

        const data = [];

        for (let item of result.data){
            data.unshift({ name: item.name.length<10?item.name:item.name.substring(0,10), value: item.count});
        }
        option.series[0].data = data;
        charts.setOption(option);
    });
}

// 绘制图表
let option = {
  title: {
    text: '义诊活动 Top5',
    textStyle: {
      color: '#161D23',
      fontWeight: 'bold',
      fontSize: '16px',
    },
    left: '10px',
    top: '10px',
  },
  tooltip: {
    trigger: 'item'
  },
  // 修改图例组件位置到上方
  legend: {
    show: true,
    type: 'scroll', // 滚动类型，当图例过多时可以滚动
    orient: 'horizontal', // 水平排列
    left: 'center', // 水平居中
    top: '60px', // 距离顶部30px（在标题下方）
    textStyle: {
      fontSize: 16
    },
    // 图例翻页按钮
    pageIconColor: '#409EFF',
    pageIconInactiveColor: '#aaa',
    pageTextStyle: {
      color: '#333'
    }
  },
  series: [
    {
      name: '人次',
      type: 'pie',
      radius: ['25%', '65%'],
      center: ['50%', '65%'], // 调整中心位置，为上方图例留出空间
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      emphasis: {
        label: {
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      label:{
        show: false,
      },
      labelLine: {
        show: false
      },
      data: [],
    }
  ]
}
</script>

<template>

<div id="hotDoctorSchedules" style="width: 100%; height: 100%">
</div>

</template>
<style scoped>/* 添加以下样式 */
#hotDoctorSchedules {
  position: relative;
  z-index: 10;
}
</style>